<script setup lang="ts">
import BackTop from '@/components/seek/BackTop/backtop.vue'
import { onPageScroll } from '@dcloudio/uni-app'
import type { BannerItem, CategoryItem, TopGuests, UserItem } from '@/types/index/home'
import NavBar from './components/NavBar.vue'
import Swiper from './components/Swiper.vue'
import indexSkeleton from './components/index.skeleton.vue'
import PutTop from './components/PutTop.vue'
import IndexBottom from './components/IndexBottom.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import Recommendation from './components/Recommendation.vue'
import { getCategoryIconListAPI, getHomeBannerAPI, getUserItemAPI } from '@/services/index/home'
import { onMounted, ref } from 'vue'

//轮播图事件
const BannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  const { data } = await getHomeBannerAPI()
  console.log(data)
  BannerList.value = data.result
}

onMounted(() => {
  Promise.all([getHomeBannerData(), getCategoryIconList(), getUserList()])
})

const showBackToTop = ref(false)
// 滚动事件
onPageScroll((event) => {
  showBackToTop.value = event.scrollTop > 100
})

//导航按钮
const categoryList = ref<CategoryItem[]>([])
const getCategoryIconList = async () => {
  const res = await getCategoryIconListAPI()
  categoryList.value = res.data.result
}

//推荐嘉宾
const userList = ref<UserItem[]>([])
const getUserList = async () => {
  const { data } = await getUserItemAPI()
  userList.value = data.result
}
</script>

<template>
  <NavBar />
  <!-- <indexSkeleton v-if="!BannerList.length" /> -->
  <!-- 轮播图、分类、置顶嘉宾、推荐嘉宾 -->
  <scroll-view scroll-y="true" class="scroll-view">
    <Swiper :list="BannerList" />
    <CategoryPanel :list="categoryList" />
    <PutTop />
    <Recommendation :list="userList" />
    <IndexBottom />
  </scroll-view>
  <!-- 返回顶部 -->
  <BackTop :show="showBackToTop" />
</template>

<style lang="scss">
//
</style>
